<template>
	<view>
		<view style="background: #FFFFFF;">
			<uni-data-picker :localdata="rooms"  v-model="room" popup-title="请选择位置" @change="roomChange"></uni-data-picker>
		</view>
		<view class="uni-flex uni-row">
			<view class="flex-item middle-line">
				<view class="uni-title">电表</view>
				<view style="text-align: center;"><text class="we-value">{{electricity}}</text>可用量</view>
			</view>
			<view class="flex-item">
				<view class="uni-title">水表</view>
				<view style="text-align: center;"><text class="we-value">{{water}}</text>可用量</view>
			</view>
		</view>
		<view>
			<view>充值类型</view>
			<view class="uni-form-item uni-column" >
				<radio-group class="we-radio-group" @change="changeType">
					<view class="we-flex uni-row">
						<view class="flex-item"><radio value="electricity" checked="checked"></radio><text style="padding-left: 8px;">电表</text></view>
						<view class="flex-item"><radio value="water"></radio><text style="padding-left: 8px;">水表</text></view>
					</view>
				</radio-group>
			</view>
			<view>充值单价</view>
			<view style="text-align: center;height: 38px;line-height: 38px;background: #FFFFFF;font-size: 18px;">
				{{price}}元/{{unit}}
			</view>
			<view>充值金额</view>
			<view class="wrapper">
				<view v-for="(item,index) in charges" :key="item.name" @click="changeMoney(index)" class="letter" v-bind:class="{co: item.checked}">{{item.name}}元</view>
			</view>
			<view>到账用量</view>
			<view style="text-align: center;height: 38px;line-height: 38px;background: #FFFFFF;font-size: 18px;">
				{{available}}{{unit}}
			</view>
			<view class="btn-block">
				<button type="primary" @click="topUp()">立即支付</button>
			</view>
		</view>
	</view>
</template>

<script>
	const context = require("../../context/Java110Context.js");
	const constant = context.constant;
	export default {
		data() {
			return {
				rooms: [],
				room: 0,
				roomType:"",
				water:0,
				type: 'electricity',
				feeId: "",
				electricity:0,
				money: 0.01,
				price: 0,
				unit: '度',
				available: 0,
				charges:[
					{
						name: 0.01,
						checked: true
					},
					{
						name: 100,
						checked: false
					},
					{
						name: 300,
						checked: false
					},
					{
						name: 500,
						checked: false
					}
				]
 
			}
		},
		created(){
			var _that = this;
			_that.available = Math.floor(_that.money / _that.price);
			_that.loadWePrice();
		},
		methods: {
			roomChange(room){
				var _that = this;
				var rooms = _that.rooms;
				for(var i = 0;i<rooms.length;i++){
					if(room == rooms[i].value){
						_that.room = rooms[i].value;
						_that.roomType = rooms[i].type;
						if(_that.type === 'electricity'){
							_that.price = rooms[i].electricity;
							this.unit = '度';
						} else {
							_that.price = rooms[i].water;
							this.unit = '方';
						}
						_that.electricity = rooms[i].eNum;
						_that.water = rooms[i].wNum;
						break
					}					
				}
				_that.available = Math.floor(_that.money / _that.price);
			},
			changeMoney(index){
				let data = this.charges;
				for(var i = 0;i<data.length; i++){
					if(i == index){
						data[i].checked = true
						this.money = data[i].name
						this.available = Math.floor(this.money / this.price);
					} else {
						data[i].checked = false
					}
				}
			},
			changeType(evt){
				var type = evt.target.value;
				
				var _that = this;
				var rooms = _that.rooms;
				for(var i = 0;i<rooms.length;i++){
					if(_that.room == rooms[i].value){
						if(type === 'electricity'){
							_that.price = rooms[i].electricity;
							_that.unit = '度';
							_that.type = 'electricity';
						} else {
							_that.price = rooms[i].water;
							_that.unit = '方';
							_that.type = 'water';
						}
						break
					}					
				}
				_that.available = Math.floor(_that.money / _that.price);
			},
			loadWePrice(){
				let _that = this;
				context.getWePrice().then(res => {
					if(res){
						var rooms = res.data.data;
						if(rooms){
							_that.rooms = rooms;
							_that.room = rooms[1].value;
							_that.price = rooms[1].electricity;
							_that.electricity = rooms[1].eNum;
							_that.water = rooms[1].wNum;
							_that.roomType = rooms[1].type;
							console.log(_that.money , _that.price);
							_that.available = Math.floor(_that.money / _that.price);
						}
					}
				});
			},
			rebaseTopUP(id){
				var _params = {
					feeId: id
				}
				context.request({
					url: constant.url.rebaseTopUP,
					method: "POST",
					header: context.getHeaders(),
					data: _params,
					success: function(res){
						if (res.statusCode == 200 && res.data.code == '0') {
						} else {
							uni.showToast({
							    title: '系统失败',
								icon:'none',
							    duration: 2000
							});
						}
					},
					fail: function(e){
						uni.showToast({
						    title: '系统失败',
							icon:'none',
						    duration: 2000
						});
					}
				});
			},
			topUp(){
				var _that = this;
				var money = _that.money;
				if(money <= 0){
					uni.showToast({
					    title: '金额不能小于0',
						icon:'none',
					    duration: 2000
					});
					return;
				}
				var _useLevel = Math.floor(_that.money / _that.price);
				if(_useLevel == undefined || _useLevel == null || _useLevel == Infinity || _useLevel <= 0){
					uni.showToast({
					    title: '预估到账用量不合法',
						icon:'none',
					    duration: 2000
					});
					return;
				}
				var feeType = "";
				var _community = context.getCurrentCommunity();
				console.log(_that.type);
				if(_that.type === 'electricity'){
					if(_that.roomType == "2020602"){
						feeType = "88880001001601";
					} else {
						feeType = "888800010016";
					}
				} else {
					if(_that.roomType == "2020602"){
						feeType = "88880001001501";
					} else {
						feeType = "888800010015";
					}
				}
				var _params = {
					money: _that.money,
					communityId: _community.communityId,
					roomId: _that.room,
					feeType: feeType
				}
				context.request({
					url: constant.url.topUpWe,
					method: "POST",
					header: context.getHeaders(),
					data: _params,
					success: function(res){
						if (res.statusCode == 200 && res.data.code == '0') {
							var _feeId = res.data.data;
							_that.feeId = _feeId;
							uni.showModal({
								title: '提醒',
								content: '确定是要充值吗？',
								success: function (res) {
									if (res.confirm) {
										_that.onPayFee();
									} else if (res.cancel) {
										_that.rebaseTopUP(_feeId)
										
										
										console.log('用户点击取消');
									}
								}
							});
						} else {
							uni.showToast({
							    title: '系统失败',
								icon:'none',
							    duration: 2000
							});
						}
					},
					fail: function(e){
						uni.showToast({
						    title: '系统失败',
							icon:'none',
						    duration: 2000
						});
					}
				});
			},
			onPayFee(){
				var _that = this;
				var _community = context.getCurrentCommunity();
				let accountInfo = uni.getAccountInfoSync();
				console.log(accountInfo);
				wx.showLoading({
					title: '支付中'
				});
				let _tradeType = 'JSAPI';
				let _objData = {
					cycles: 1,
					communityId: _community.communityId,
					feeId: _that.feeId,
					feeName: '水电费',
					receivedAmount: _that.money,
					tradeType: _tradeType,
					appId: accountInfo.miniProgram.appId
				};
				context.request({
					url: constant.url.preOrder,
					header: context.getHeaders(),
					method: "POST",
					data: _objData,
					//动态数据
					success: function(res) {
				
						if (res.statusCode == 200 && res.data.code == '0') {
							let data = res.data; //成功情况下跳转
							// #ifdef MP-WEIXIN
							uni.requestPayment({
								'timeStamp': data.timeStamp,
								'nonceStr': data.nonceStr,
								'package': data.package,
								'signType': data.signType,
								'paySign': data.sign,
								'success': function(res) {
									uni.showToast({
										title: "支付成功",
										duration: 2000
									});
									uni.navigateBack({});
								},
								'fail': function(res) {
									console.log('fail:' + JSON.stringify(res));
								}
							});
							// #endif
							// #ifdef H5
								WexinPayFactory.wexinPay(data,function(){
									uni.showToast({
										title: "支付成功",
										duration: 2000
									});
									uni.navigateBack({});
								});
							// #endif
							wx.hideLoading();
							return;
						}
				
						wx.hideLoading();
						wx.showToast({
							title: "缴费失败",
							icon: 'none',
							duration: 2000
						});
					},
					fail: function(e) {
						wx.hideLoading();
						wx.showToast({
							title: "服务器异常了",
							icon: 'none',
							duration: 2000
						});
					}
				});
			}
		}
	}
</script>

<style>	
	
	.wrapper {
		display: grid;
		background: #FFFFFF;
		grid-template-columns: 1fr 1fr;
		grid-template-rows: 1fr 1fr;
		grid-column-gap: 8px;
		grid-row-gap: 8px;
		padding: 8px 18px;
    }
	
	.letter {
		border: #6A6A6A solid 1px;
		display: flex;
		height: 65px;
		justify-content: center;
		align-items: center;
		color: #6A6A6A;
		border-radius: 8px;
		font-family: 'hobeaux-rococeaux-background', Helvetica;
		font-weight: 400;
		cursor: pointer;
		transition: all .3s ease;
		font-size: 21px;
	}
	
	.co {
		background-color: #1AAD19;
		color: #FFFFFF;
	}
	

	.uni-title {
		font-size:30rpx;
		font-weight:500;
		padding:20rpx 0;
		line-height:1.5;
		text-align: center;
	}
	
	.we-value {
		font-size:60rpx;
		font-weight:500;
		padding:20rpx 0;
		line-height:1.5;
		text-align: center;
	}
	
	.we-radio-group {
		width: 100%; 
		text-align: center;
		background: #FFFFFF;
		height: 38px;
		line-height: 38px;
	}
	
	.middle-line {
		border-right: solid 1px #008800;
	}
	
	.uni-flex {
		display: flex;
		flex-direction: row;
		border-bottom: solid 1px #008800;
	}
	
	.we-flex {
		display: flex;
		flex-direction: row;
	}
	
	.uni-row {
		flex-direction: row;
	}
	
	.btn-block {
	    position: fixed;
	    bottom: 8px;
		width: 90%;
		margin: 0 20px;
	}
	
	.flex-item {
		width: 50%;
		height: 250rpx;
	}
</style>
